<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
    <link rel="stylesheet" href="/style/eleTree.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">角色设置</div>
                <div class="layui-card-body">
                    <div style="margin-bottom: 10px;">
                        <div class="layui-input-item" style="float:left;padding-right:10px;">
                            <form class="layui-form">
                                <div class="layui-inline">
                                    <a id="btn-search" class="layui-btn">查找</a>
                                </div>
                            </form>
                        </div>
                        <div style="float:right;">
                            <a id="btn-add" class="layui-btn">添加</a>
                            <a id="btn-refresh" class="layui-btn layui-btn-primary">刷新</a>
                        </div>
                        <div style="clear:both;"></div>
                    </div>
                    <table class="layui-hide" id="role-table" lay-filter="role-table"></table>
                    <script type="text/html" id="toolbar-operation">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">详情</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="menu">菜单设置</a>
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="access">访问控制</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="popup-form">
    <div class="layui-card">
        <div class="layui-card-header">角色详情</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="popup-form">
                <input type="hidden" name="id">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="form-submit">确定
                    </button>
                </div>
            </form>
        </div>
    </div>
</script>

<script type="text/html" id="menu-form">
    <div class="layui-card">
        <div class="layui-card-header">菜单配置</div>
        <div class="layui-card-body">
            <div id="menu-tree" class="eleTree" lay-filter="menu-tree"></div>
            <div style="padding-top:20px;">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="menu-submit">确定
                </button>
            </div>
        </div>
    </div>
</script>

<script type="text/html" id="access-form">
    <div class="layui-card">
        <div class="layui-card-header">访问控制</div>
        <div class="layui-card-body">
            <table class="layui-hide" id="access-policy-table" lay-filter="access-policy-table"></table>
            <div style="padding-top:20px;">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="access-submit">确定
                </button>
            </div>
        </div>
    </div>
</script>

<script src="/layui/layui.js"></script>
<script>
    layui.config({
        base: '/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'eleTree'], function () {
        var $ = layui.$;
        var table = layui.table;
        var form = layui.form;
        var admin = layui.admin;
        var eleTree = layui.eleTree;
        var popupIndex;
        var accessTable;
        var menuTree;
        var roleId;

        table.render({
            elem: '#role-table',
            url: 'roles',
            title: '',
            skin: 'line',
            cols: [[
                {field: 'name', title: '角色名称'},
                {fixed: 'right', title: '操作', width: '300', align: 'center', toolbar: '#toolbar-operation'}
            ]],
            page: true
        });


        function showPopupForm() {
            popupIndex = admin.popupRight({
                area: '360px',
                success: function () {
                    var formHtml = $('#popup-form').html();
                    $('#' + this.id).html(formHtml);
                    form.render();
                }
            });
            return popupIndex;
        }

        function showAccessForm(roleId) {
            popupIndex = admin.popupRight({
                area: '600px',
                success: function () {
                    var html = $('#access-form').html();
                    $('#' + this.id).html(html);
                    accessTable = table.render({
                        elem: '#access-policy-table',
                        url: 'roles/' + roleId + '/access-policies',
                        title: '访问控制',
                        skin: 'line',
                        cols: [[
                            {type: 'checkbox'},
                            {field: 'name', title: '访问策略名称'},
                            {field: 'note', title: '访问策略描述'}
                        ]],
                        page: false
                    });
                }
            });
            return popupIndex;
        }

        function showMenuForm(roleId) {
            popupIndex = admin.popupRight({
                area: '300px',
                success: function () {
                    var html = $('#menu-form').html();
                    $('#' + this.id).html(html);
                    menuTree = eleTree.render({
                        elem: '#menu-tree',
                        showCheckbox: true,
                        defaultExpandAll: true,
                        emptText: '没有数据',
                        url: 'roles/' + roleId + '/menus'
                    });
                }
            });
            return popupIndex;
        }

        function closePopupForm() {
            if (popupIndex) {
                layer.close(popupIndex);
            }
        }

        function search() {
            table.reload('role-table', {
                where: {}
            });
        }

        $("#btn-search").on('click', function () {
            search();
        })

        $('#keyword').keypress(function (e) {
            if (e.which == 13) {
                search();
            }
        });

        $("#btn-add").on('click', function () {
            popupIndex = showPopupForm();
        })

        $("#btn-refresh").on('click', function () {
            table.reload('role-table');
            layer.msg('表格已刷新');
        })

        table.on('tool(role-table)', function (obj) {
            var data = obj.data;
            roleId = data.id;
            if (obj.event === 'del') {
                layer.confirm('真的删除该记录吗？', function (index) {
                    $.ajax({
                        url: 'roles/' + data.id,
                        type: 'DELETE',
                        success: function (result) {
                            if (result.code == 0) {
                                layer.msg('删除成功');
                                table.reload('role-table');
                            } else {
                                layer.msg('删除失败');
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                showPopupForm();
                form.val('popup-form', data);
            } else if (obj.event === 'access') {
                showAccessForm(roleId);
            } else if (obj.event === 'menu') {
                showMenuForm(roleId);
            }
        });

        form.on('submit(form-submit)', function (data) {
            $.ajax({
                url: 'roles',
                type: 'PUT',
                data: data.field,
                success: function (result) {
                    if (result.code == 0) {
                        layer.msg('提交成功');
                        table.reload('role-table');
                    } else {
                        layer.msg('提交失败');
                        console.error('提交失败');
                    }
                }
            });
            closePopupForm();
            return false;
        });

        form.on('submit(menu-submit)', function (data) {
            var menus = menuTree.getChecked();
            var ids = '';
            for (var i in menus) {
                var id = menus[i].id;
                ids += id;
                ids += ',';
            }
            if (ids.length > 0) {
                ids = ids.substring(0, ids.length - 1);
            }
            $.ajax({
                url: 'roles/' + roleId + '/menus',
                type: 'PUT',
                data: {menus: ids},
                success: function (result) {
                    if (result.code == 0) {
                        layer.msg('提交成功');
                        closePopupForm();
                    } else {
                        layer.msg('提交失败');
                        console.error('提交失败');
                    }
                }
            });
            return false;
        });

        form.on('submit(access-submit)', function (data) {
            var checkStatus = table.checkStatus('access-policy-table'); //获取选中行状态
            var ids = '';
            for (var i in checkStatus.data) {
                var id = checkStatus.data[i].id;
                ids += id;
                ids += ',';
            }
            if (ids.length > 0) {
                ids = ids.substring(0, ids.length - 1);
            }
            $.ajax({
                url: 'roles/' + roleId + '/access-policies',
                type: 'PUT',
                data: {accessPolicies: ids},
                success: function (result) {
                    if (result.code == 0) {
                        layer.msg('提交成功');
                        closePopupForm();
                    } else {
                        layer.msg('提交失败');
                        console.error('提交失败');
                    }
                }
            });
            return false;
        });

    });
</script>
</body>
</html>